<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>D3交互式数据可视化</title>
	<style>
	</style>
</head>
<body>
	<div style="padding: 50;background: gray" class="event"></div>
	<ul>
		<li>keydown事件--按住不会重复触发此事件</li>
		<li><strong>注意区分keydown和keypress的不同</strong></li>
		<li>keydown用于任意键的事件，keypress用于字符键</li>
		<li>如果只需处理字母数字类的响应，使用keypress</li>
		<li>如果要处理上下左右、shift、ctrl等特殊键的输入，使用keydown</li>
		<li>screenX和screenY参照点是显示器屏幕的左上角</li>
		<li>client和clientY以浏览器内容做</li>
		<li>pageX和pageY是以页面上左上角为参照点，参照点不会随着滚动条的移动而移动</li>
		<li></li>
	</ul>
	<div class="char">
		
	</div>
	<script src="js/d3_3.5.7.js"></script>
	<script>
		var width = 500;
		var height = 500;
		var char = ["A","S","D","F"];
		var svg = d3.select(".char").append('svg').attr({"width":width,"height":height});
		
		var rects = svg.selectAll("rect").data(char).enter().append("rect")
								.attr("x",function(d,i) {
									return 10 + 60 * i;
								})
								.attr("y",150)
								.attr("width",55)
								.attr("height",55)
								.attr("rx",5)
								.attr("ry",5)
								.attr("fill","black");

		var texts = svg.selectAll("text").data(char).enter().append('text')
									.attr("x",function(d,i) {
										return 10 + 60 * i;
									})
									.attr("y",150)
									.attr("dx",10)
									.attr("dy",25)
									.attr("fill","white")
									.attr("font-size",24)
									.text(function(d) {return d});

		d3.select("body").on("keydown",function() {
			rects.attr("fill",function(d) {
				if(d == String.fromCharCode(d3.event.keyCode)) {
					return "yellow";
				} else {
					return "black"
				}
			})
		})
		.on("keyup",function() {
			rects.attr("fill","black")
		})

		var svg2 = d3.select(".event").append('svg').attr({"width":width,"height":height}).style("background","yellow")
		svg2.append("rect").attr("x",200).attr("y",100).attr("width",100).attr("height",100)
				.on("click",function() {
					console.log(d3.mouse(this))
				})

		
	</script>
</body>
</html>